import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { actions, getGetcate, getGetgoods, getCartadd } from "../../store/modules/cate";
import { bindActionCreators } from "redux";
import "./Cate.css";
import { reqCartadd } from "../../request/api";

// import './Home.css'
class Cate extends PureComponent {
  render() {
    let { getcate, getgoods,cate:{reqGetgoods,reqCartadd} } = this.props;
    console.log(reqCartadd);
    return (
      <div className="cate">
        <ul className="cate_ul">
          {getcate? getcate.map((item) => 
            <li key={item.id} onClick={()=>reqGetgoods(item.id)}
          
            >{item.catename}</li>)
            : null}
        </ul>
        <div className="cate_right">
          <h3>热门精选</h3>
          {getgoods? getgoods.map((item) => (
                <div className="cate_right_box" key={item.id}>
                  <img src={item.img} alt="" />
                 <div className='cate_you'>
                   <div>{item.goodsname}</div>
                  <div>现价：{item.price}</div>
                  <div>原价：{item.market_price}</div>
                 </div>
                 <button onClick={()=>reqCartadd(item.id)}>加入购物车</button>
                </div>
              ))
            : null}
        </div>
      </div>
    );
  }
  componentDidMount() {
    let { reqGetcate, reqGetgoods,reqCartadd } = this.props.cate;
    reqGetcate();
    reqGetgoods(1);
    reqCartadd()
  }
}
//收数据
let mapStateToProps = (state) => ({
  getcate: getGetcate(state),
  getgoods: getGetgoods(state),
  cartadd:getCartadd(state)
});
//收方法
let mapDispatchToProps = (dispatch) => ({
  cate: bindActionCreators(actions, dispatch),
});
export default connect(mapStateToProps, mapDispatchToProps)(Cate);
